<template>
	<div class="Lorin_main">
			<div class="left">
			<!-- 侧边商品栏-Lorin -->
			<div class="left_item"  @mouseenter.once='getList("phone")'>
				<router-link to='/goodsList?kind=phone'>
					<el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in phoneList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">手机 电话卡 <i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("TV")'>
					<router-link to='/goodsList?kind=TV'>
						<el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in TVList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">电视 盒子<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("computer")'>
					<router-link to='/goodsList?kind=computer'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in computerList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">笔记本 平板<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("jd")'>
					<router-link to='/goodsList?kind=jd'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in jdList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">家电 插线板<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("cx")'>
					<router-link to='/goodsList?kind=cx'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in cxList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">出行 穿戴<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("zn")'>
					<router-link to='/goodsList?kind=zn'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in znList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">智能 路由器<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("power")'>
					<router-link to='/goodsList?kind=power'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in powerList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">电源配件<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("phone")'>
					<router-link to='/'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in phoneList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">健康 儿童<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("phone")'>
					<router-link to='/'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in phoneList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">耳机 音响<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			<div class="left_item"  @mouseenter.once='getList("phone")'>
					<router-link to='/'><el-popover
    placement="right-start"
    width="1000"
    trigger="hover">
    <div class="show">
    	<div class="show_item" v-for='item in phoneList'>
    		<img :src="'http://129.204.193.180:8080' + item.url" width='50%' height="80%">
    		<p>{{item.name}}</p>
    	</div>
    </div>
    <el-button slot="reference">生活 箱包<i class="el-icon-caret-right"></i></el-button>
  </el-popover></router-link>
				</div>
			</div>
			<!-- /侧边商品栏 -->

			<!-- 小屏时的商品栏 -->
			<router-view></router-view>
			<!-- /小屏时的商品栏 -->

			<!-- 右侧轮播图区域-Lorin -->
			<div class="right">
  <el-carousel height='100%'>
    <el-carousel-item v-for="item in lbList" :key="item" class='lbItem'>
      <img :src="'http://129.204.193.180:8080' + item">
    </el-carousel-item>
  </el-carousel>
			</div>
			<!-- /右侧轮播图区域-Lorin -->

			<div class="Lorin_bottom">
				<div class="channel-list">
					<div class="list_item">
						<p><i class="el-icon-mobile-phone"></i></p>
						<p>选购手机</p>
					</div>
					<div class="list_item">
						<p><i class="el-icon-goods"></i></p>
						<p>企业团购</p>
					</div>
					<div class="list_item">
						<p><i class="el-icon-zoom-in"></i></p>
						<p>F码通道</p>
					</div>
					<div class="list_item">
						<p><i class="el-icon-printer"></i></p>
						<p>米粉卡</p>
					</div>
					<div class="list_item">
						<p><i class="el-icon-refresh"></i></p>
						<p>以旧换新</p>
					</div>
					<div class="list_item">
						<p><i class="el-icon-sort"></i></p>
						<p>话费充值</p>
					</div>
				</div>
				<div class="advertisement">
					<img src="https://i1.mifile.cn/a4/xmad_1550713536261_EJOpq.jpg">
					<img src="https://i1.mifile.cn/a4/xmad_15510775494887_EWGcg.jpg">
					<img src="https://i1.mifile.cn/a4/xmad_15410599445473_Ivjsb.jpg">
				</div>
			</div>

			<!-- 产品区域 -->
<div id="zhh-among">
	<div class="right"> 手机 <a href="#">查看全部
		<div class="jion">
			<r>〉</r>
		</div>
	</a> </div>
	<div class="among">
		<div class="among-box"><a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c1.jpg'" class="among-box"></a></div>
		<div class="c0">
      <div class="among-box1"> <a href="#">
        <p>新品</p>
        <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c2.jpg'" ></a>
        <div class="among-box2"><a href="#">小米9 6GB+128GB</a> <br>
          <h>小米9 6GB+128GB</h>
          <br>
          <br>
          <z>2999元</z>
        </div>
      </div>
      <div class="among-box1">
        <p2>新品</p2>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c3.png'" ></a>
        <div class="among-box2"><a href="#">小米9 SE 6GB+64GB</a> <br>
          <h>小米9 SE 6GB+64GB</h>
          <br>
          <br>
          <z>1999元</z>
        </div>
      </div>
      <div class="among-box1">
        <p>新品</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c4.jpg'" ></a>
        <div class="among-box2"><a href="#">Redmi Note 7 3GB+32G</a> <br>
          <h>Redmi Note 7 3GB+32G</h>
          <br>
          <br>
          <z>999元</z>
        </div>
      </div>
      <div class="among-box1">
        <p>新品</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c5.jpg'" ></a>
        <div class="among-box2"><a href="#">小米Play 4GB+64GB</a> <br>
          <h>小米Play 4GB+64GB</h>
          <br>
          <br>
          <z>1099元</z>
        </div>
      </div>
    </div>
    <div class="among-box3">
    	<div class="among-box1">
        <p>减 200 元</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c6.jpg'"></a>
        <div class="among-box2"><a href="#">小米8青春版6GB+64GB</a> <br>
          <h>潮流镜面渐变色，2400万自拍旗舰</h>
          <br>
          <br>
          <z>1499元</z>
          <z1>1699元</z1>
        </div>
      </div>
      <div class="among-box1">
        <p>享8折</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c7.jpg'"></a>
        <div class="among-box2"><a href="#">小米8 SE 6GB+64GB</a> <br>
          <h>小米8 SE 6GB+64GB</h>
          <br>
          <br>
          <z>1599元</z>
          <z1>1999元</z1>
        </div>
      </div>
      <div class="among-box1">
        <p>享8折</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c8.jpg'"></a>
        <div class="among-box2"><a href="#">小米 6X 6GB+128GB</a> <br>
          <h>轻薄美观的拍照手机</h>
          <br>
          <br>
          <z>1499元</z>
          <z1>1999元</z1>
        </div>
      </div>
      <div class="among-box1">
        <p>减50元</p>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among手机/c9.jpg'"></a>
        <div class="among-box2"><a href="#">红米6A 2GB+16GB</a> <br>
          <h></h>
          <br>
          <br>
          <z>549元</z>
          <z1>599元</z1>
        </div>
      </div>
    </div>

	</div>
</div>
<div class="long"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among长图/ct1.jpg'" alt="" width="90%"></a></div>
<div id="zhh-among">
	<div class="right">家电
    <div class="top-right2">
      <div class="zz zz2 active">
      <a href="#">热门</a></div>
    <div class="zz"><a href="#">电视影音</a></div>
    <div class="zz"><a href="#">电脑</a></div>
    <div class="zz"><a href="#">家居</a></div>
  </div>
</div>
<div class="among">
  <div class="among-box4"><a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd1.jpg'" class="among-box4"></a></div>
  <div class="c0">
    <div class="among-box1"> <a href="#">
      <p2>新品</p2>
      <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd3.jpg'" ></a>
      <div class="among-box2"><a href="#"> 米加互联网洗烘一体机 10kg</a> <br>
        <h></h>
        <br>
        <br>
        <z>2499元</z>
      </div>
      <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
    </div>
    <div class="among-box1">
      <p2>新品</p2>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd4.jpg'" ></a>
      <div class="among-box2"><a href="#">米家互联网空调（一级能效）</a> <br>
        <h>米家互联网空调（一级能效）</h>
        <br>
        <br>
        <z>2699元</z>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1">
      <p2>新品</p2>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd5.png'" ></a>
      <div class="among-box2"><a href="#">15.6"笔记本 i5 4G MX110"</a> <br>
        <h>相机全新升级，960帧超慢动作</h>
        <br>
        <br>
        <z>3899元</z>
        <z1>4199元</z1>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"><a href="#"> <br>
      <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd6.jpg'" ></a>
      <div class="among-box2"><a href="#">13.3"小米笔记本Air 四核i7 8G.."</a> <br>
        <h>骁龙845 年度旗舰处理器，艺术品般</h>
        <br>
        <br>
        <z>299元</z>
        <z1>1699元</z1>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
  </div>
  <div class="among-box4"> <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd2.jpg'" class="among-box4"></a></div>
  <div class="among-box3">
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd7.png'" ></a>
      <div class="among-box2"><a href="#">米家空气净化器Pro</a> <br>
        <h>OLED 显示屏幕/激光颗粒传感器</h>
        <br>
        <br>
        <z>1499元</z>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd8.jpg'" ></a>
      <div class="among-box2"><a href="#">米家水电壶</a> <br>
        <h>一杯水，是一家人的安心</h>
        <br>
        <br>
        <z>99元</z>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd9.png'" ></a>
      <div class="among-box2"><a href="#">米家LED吸顶灯</a> <br>
        <h>用光线，还原理想生活</h>
        <br>
        <br>
        <z>399元</z>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box5">
      <div  class="among-box6"> <a href="#">小米净水器</a> <br>
        <br>
        <z>1499元</z>
        <div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
      <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd10.jpg'" ></a></div>
    <div  class="among-box5">
      <div  class="among-box6"> <a href="#">浏览更多</a> <br>
        <br>
        <a href="#">热门</a> </div>
      <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd11.jpg'" ></a></div>
  </div>
</div>
</div>
<div class="long"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among长图/ct2.jpg'" alt="" width="90%"></a></div>
<div id="zhh-among">
  <div class="right">智能
    <div class="top-right">
     <div class="zz active" >
      <a href="#">热门</a></div>
    <div class="zz"><a href="#">出行</a></div>
    <div class="zz"><a href="#">健康</a></div>
    <div class="zz"><a href="#">酷玩</a></div>
    <div class="zz"><a href="#">路由器</a></div>
  </div>
</div>
<div class="among">
  <div class="among-box4"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn1.jpg'" class="among-box4"></a></div>
  <div class="c0">
    <div class="among-box1"> <a href="#">
      <p2>新品</p2>
      <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn2.png'" ></a>
      <div class="among-box2"><a href="#">米家飞利浦睿智台灯二代</a> <br>
        <h>感知环境光，主动优化场景照明</h>
        <br>
        <br>
        <z>199元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1">
      <p2>新品</p2>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn3.jpg'" ></a>
      <div class="among-box2"><a href="#">小米手环3</a> <br>
        <h></h>
        <br>
        <br>
        <z>169元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1">
      <p2>新品</p2>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn4.jpg'" ></a>
      <div class="among-box2"><a href="#">小米体重秤</a> <br>
        <h>高精度压力传感器/手机管理全家健康</h>
        <br>
        <br>
        <z>99元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"><a href="#"> <br>
      <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn5.png'" ></a>
      <div class="among-box2"><a href="#">小米IH电饭煲 4L</a> <br>
        <h>IH 电磁环绕加热</h>
        <br>
        <br>
        <z>599元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
  </div>
  <div class="among-box4"> <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn6.jpg'" class="among-box4"></a></div>
  <div class="among-box3">
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn7.jpg'" ></a>
      <div class="among-box2"><a href="#">车载空气净化器(USB车充版)</a> <br>
        <h>高效净化车内空气</h>
        <br>
        <br>
        <z>449元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn8.jpg'"></a>
      <div class="among-box2"><a href="#">小米米家行车记录仪1S</a> <br>
        <br>
        <br>
        <z>329元</z>
        <z1>349元</z1>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div class="among-box1"> <br>
      <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn9.jpg'"></a>
      <div class="among-box2"><a href="#">米家声波电动牙刷</a> <br>
        <h>磁悬浮声波马达，定制多种声牙刷模式</h>
        <br>
        <br>
        <z>199元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
    </div>
    <div  class="among-box5">
      <div  class="among-box6"> <a href="#">小米插线板...</a> <br>
        <br>
        <z>49元</z>
				<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
      </div>
      <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among智能/zn10.jpg'" ></a></div>
    <div  class="among-box5">
      <div  class="among-box6"> <a href="#">浏览更多</a> <br>
        <br>
        <a href="#">热门</a> </div>
      <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd11.jpg'" ></a></div>
  </div>
</div>
</div>
<div class="long"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among长图/ct3.jpg'" alt="" width="90%"></a></div>
<div id="zhh-among">
  <div class="right">搭配
    <div class="top-right2">
      <div class="zz active active"><a href="#">热门</a></div>
      <div class="zz active"><a href="#">耳机音箱</a></div>
      <div class="zz active"><a href="#">电源</a></div>
      <div class="zz active"><a href="#">电池存储卡</a></div>
    </div>
  </div>
  <div class="among">
    <div class="among-box4"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp1.jpg'" class="among-box4"></a></div>
    <div class="c0">
      <div class="among-box1"> <a href="#">
        <p2>新品</p2>
        <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp2.jpg'" ></a>
        <div class="among-box2"><a href="#">小米USB充电器快充版（18W）</a> <br>
          <h>3.2万人评价</h>
          <br>
          <br>
          <z>29.9元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>        </div>
      </div>
      <div class="among-box1">
       <p2>新品</p2>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp3.jpg'" ></a>
        <div class="among-box2"><a href="#">小米AI音箱</a> <br>
          <h>7.7万人评价</h>
          <br>
          <br>
          <z>299元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1">
        <p2>新品</p2>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp4.jpg'" ></a>
        <div class="among-box2"><a href="#">小米移动电源3 20000mAh 高配版</a> <br>
          <h>2423人评价</h>
          <br>
          <br>
          <z>199元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"><a href="#"> <br>
        <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp5.jpg'" ></a>
        <div class="among-box2"><a href="#">新小米移动电源2（10000mAh ）</a> <br>
          <h>2.8万人评价</h>
          <br>
          <br>
          <z>79元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
    </div>
    <div class="among-box4"> <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp6.jpg'" class="among-box4"></a></div>
    <div class="among-box3">
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp7.jpg'"></a>
        <div class="among-box2"><a href="#">小米移动电源2C（20000mAh）Pro</a> <br>
          <h>3.6万人评价</h>
          <br>
          <br>
          <z>129元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp8.jpg'"></a>
        <div class="among-box2"><a href="#">小米无线充电器（ 通用快充版 ）</a> <br>
          <h>4880人评价</h>
          <br>
          <br>
          <z>69元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp9.jpg'"></a>
        <div class="among-box2"><a href="#">小米移动电源高配版（10000mA...</a> <br>
          <h>3.3万人评价</h>
          <br>
          <br>
          <z>149元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div  class="among-box5">
        <div  class="among-box6"> <a href="#">小米USB充...</a> <br>
          <br>
          <z>59元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
        <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp10.jpg'" ></a></div>
      <div  class="among-box5">
        <div class="among-box6"> <a href="#">浏览更多</a> <br>
          <br>
          <a href="#">热门</a> </div>
        <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd11.jpg'" ></a></div>
    </div>
  </div>
</div>
<div class="long"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among长图/ct4.jpg'" alt="" width="90%" ></a></div>
<div id="zhh-among">
  <div class="right">配件
    <div class="top-right2">
      <div class="zz active"><a href="#">热门</a></div>
      <div class="zz"><a href="#">保护套</a></div>
      <div class="zz"><a href="#">贴膜</a></div>
      <div class="zz"><a href="#">其他配件</a></div>
    </div>
  </div>
  <div class="among">
    <div class="among-box4"><a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp1.jpg'" class="among-box4"></a></div>
    <div class="c0">
      <div class="among-box1"> <a href="#">
        <p2>新品</p2>
        <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp2.jpg'" ></a>
        <div class="among-box2"><a href="#">红米Note 7 洞洞保护壳（创意..</a> <br>
          <h>1655人评价</h>
          <br>
          <br>
          <z>29元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1">
        <p2>新品</p2>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp3.jpg'" ></a>
        <div class="among-box2"><a href="#">小米8 标准钢化玻璃膜</a> <br>
          <h>8322人评价</h>
          <br>
          <br>
          <z>25元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1">
        <p2>新品</p2>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp4.jpg'" ></a>
        <div class="among-box2"><a href="#">小米8 硅胶保护套</a> <br>
          <h>6843人评价</h>
          <br>
          <br>
          <z>49元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"><a href="#"> <br>
        <img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp5.jpg'" ></a>
        <div class="among-box2"><a href="#">小米8 &屏幕指纹版</a> <br>
          <h>2.8万人评价</h>
          <br>
          <br>
          <z>49元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
    </div>
    <div class="among-box4"> <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp6.jpg'" class="among-box4"></a></div>
    <div class="among-box3">
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp7.jpg'"></a>
        <div class="among-box2"><a href="#">Mi MIX 2S 真皮保护套</a> <br>
          <h>819人评价</h>
          <br>
          <br>
          <z>99元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp8.jpg'"></a>
        <div class="among-box2"><a href="#">小米8青春版极简高透保护壳</a> <br>
          <h>859人评价</h>
          <br>
          <br>
          <z>29元</z>
          <z1>39元</z1>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div class="among-box1"> <br>
        <a href="#"><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp9.jpg'"></a>
        <div class="among-box2"><a href="#">小米8 标准高透贴膜</a> <br>
          <h>3.3万人评价</h>
          <br>
          <br>
          <z>10元</z>
          <z1>19元</z1>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
      </div>
      <div  class="among-box5">
        <div  class="among-box6"> <a href="#">小米USB充...</a> <br>
          <br>
          <z>59元</z>
					<div class="rewrite"><div class="rewrite-box"><h>深得本宫之心，甚为欢喜。白色静雅，操作简单，工作人员...</h><br><w>来自 汪娇的评论</w></div></div>
        </div>
        <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among搭配/dp10.jpg'" ></a></div>
      <div  class="among-box5">
        <div  class="among-box6"> <a href="#">浏览更多</a> <br>
          <br>
          <a href="#">热门</a> </div>
        <a href=""><img v-lazy="'http://129.204.193.180:8080/static/images/zhh/among家电/jd11.jpg'" ></a></div>
    </div>
  </div>
</div>
			<!-- /产品区域 -->
		</div>
</template>

<script type="text/javascript">
	export default{
		data() {
			return {
				phoneList: [],
				computerList: [],
				TVList: [],
				jdList: [],
				cxList: [],
				znList: [],
				powerList: [],
				lbList: []
			}
		},
		methods: {
			getList(kind){
				this.$http.get('http://129.204.193.180:8080/getList?kind=' + kind).then(function(res) {
					switch(kind) {
						case 'phone':
							this.phoneList = JSON.parse(res.body.resBody.data);
							break;
						case 'computer':
							this.computerList = JSON.parse(res.body.resBody.data);
							break;
						case 'TV':
							this.TVList = JSON.parse(res.body.resBody.data);
							break;
						case 'jd':
							this.jdList = JSON.parse(res.body.resBody.data);
							break;
						case 'cx':
							this.cxList = JSON.parse(res.body.resBody.data);
							break;
						case 'zn':
							this.znList = JSON.parse(res.body.resBody.data);
							break;
						case 'power':
							this.powerList = JSON.parse(res.body.resBody.data);
							break;
					}
				})
			}
		},
		created() {
			this.$http.get('http://129.204.193.180:8080/getLb').then(function(res) {
				this.lbList = res.body;
			})
		}
	}
</script>

<style lang="less" scoped>
	.Lorin_main{
		width:100%;
		.right{
			width:79%;
			height:460px;
			float:right;
			 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  		.el-carousel{height:460px;}
  		img{width:100%;height:100%;}
		}
		.left{
			width:20%;height:460px;background: linear-gradient(to bottom right, red , blue);display: inline-block; padding: 20px 0;
			.left_item{
				width:100%;
				height:42px;
				.el-button{
					width:100%;
					background-color: rgba(0,0,0,0);
					border:none;color: #fff;
					i{float:right;}
				}
				.el-button:hover{
					background-color: #ff6700;
				}
			}

		}
		.Lorin_bottom{width:100%;margin: 20px 0;clear: both;
			.channel-list{
				width: 20%;
				height:170px;
				background-color: #5f5750;
				display: inline-block;
				.list_item{
					width:33.33%;
					height:50%;
					float: left;
					padding:10px;
					p{color: #ccc; text-align: center;}
					p:nth-of-type(1){
						font-size: 26px;
					}
					p:nth-of-type(2){
						font-size: 14px;
					}
				}
				.list_item:hover > p{color:#fff;cursor: pointer;}
				.list_item:nth-of-type(1),.list_item:nth-of-type(3){border-bottom: 1px solid #aaa;}
				.list_item:nth-of-type(2){border-bottom: 1px solid #aaa;border-left: 1px solid #aaa;border-right: 1px solid #aaa;}
				.list_item:nth-of-type(5){border-left: 1px solid #aaa;border-right: 1px solid #aaa;}
			}
			.advertisement{
				display: inline-block;
				width: 77%;
				height:175px;
				margin-left: 1%;
				img{width:30%; height:100%;margin-left: 2%;}
			}
		}

	}
	.show_item{float: left; text-align: center;width:20%;height:100px;padding:10px;}
	.menu{display: none;}
	/*.lbItem{height:460px;}*/

	@media screen and (max-width:1024px){
		.Lorin_main{height:460px;}
		.Lorin_main > .left{display: none;}
		.Lorin_main > .right{width:100%; height:300px;}
		.menu{
			display: block;
			float:right;
			width:100px;
			height: 40px;
			text-align: center;
			margin-bottom: 10px;
			line-height: 40px;
			cursor: pointer;
			border-radius: 5px;
			border: 1px solid #cccccc;
		}
		.Lorin_bottom{padding-top: 10px;}
		.el-carousel{height:300px!important;}
		.channel-list{width:100%!important;}
		.advertisement{
			display: none!important;
		}
	}

	/* 郑惠鸿 */
	a {
	text-decoration: none;
}
#zhh-among {
	width: 80%;
	margin: auto;
	margin-top: 30px;	
}
#zhh-among .right {
	font-family: "zapf dingbats";
	font-size: 23px;
	color: #333358;
	width:100%;
	margin-bottom: 20px;;
	height:50px;
	
}
#zhh-among .right a {
	font-size: 16px;
	font-family: "bodoni mt black";
	color: #333358;
}
#zhh-among .right a:hover {
	color: #ff6700;
}
#zhh-among .jion {
	width: 25px;
	height: 25px;
	padding: 4px;
	margin-left: 8px;
	border-radius: 16px;
	font-size: 12px;
	line-height: 12px;
	background: #b0b0b0;
	color: #fff;
	vertical-align: 1px;
	-webkit-transition: all .4s;
	transition: all .4s;
	display: inline-block;
	text-align: center;
	line-height: 12px;
}
#zhh-among .jion r {
	margin-left: 5px;
	display: inline-block;
	margin-top: 3px;
}
#zhh-among .jion:hover {
	background: #ff6700;
}
#zhh-among .top-right, .top-right2 {
	height:100%;
	margin-left: 63%;
	margin-top: -35px;
	text-align: right;
}
.top-right div, .top-right2 div {
	float: left;
	width: 20%;
	text-align: center;
}
.top-righ {
 width:25%;
}
.top-right2 div {
	width: 25%;
}
.top-right a, .top-right2 a {
	font-size: 18px;
}
.top-right div:hover, .top-right2 div:hover, .active {
	border-bottom: 2px solid #FF6700;
}
.active > a{
	color:#FF6700!important;
}
#zhh-among .among {
    width:100%;  
	margin-top: 20px;
	margin-bottom:10px;
}
.among div {
	float: left;
}
.among img {
	width: 200px;
	height: 200px;
}
.c0 {
	height: 300px;
	margin-left: 2px;
	margin-bottom: 10px;
	width: 80%;
}
.among-box {
	width: 19.7%;
	height: 613px;
	
}
.among-box img {
	width: 100%;
	height: 613px;
}
.among-box1 {
	width: 23.55%;
	height: 300px;
	margin-left: 1.4%;
	text-align: center;
	line-height: 20px;
	background: #fff;
	position: relative;
}
.long > a > img{margin:30px 0;}
.among-box1 img {
	width: 68%;
	height: 160px;
}
.among-box1 p, .among-box1 p2 {
	display: inline-block;
	height: 20px;
	width: 80px;
	background: red;
	color: #fff;
	font-size: 13px;
	/* border: 1px solid #000; */
}
.among-box1 p2 {
	background: #ADFF2F;
}
.among-box2 {
	text-align: center;
	width: 100%;
	
	
}
.among-box1:hover, .among-box4:hover, .among-box5:hover, .among-box:hover {
	box-shadow: 0px 0px 5px gray;
	margin-top: -1px;
}
.among-box2 a, .among-box5 a {
	font-size: 14px;
	color: #33338f;
}
.among-box2 h {
	font-size: 12px;
	color: #b0b0b0;
}
.among-box2 z, z1 {
	font-size: 14px;
	margin-top: 10px;
}
.among-box2 z, .among-box6 z {
	color: #ff7a29;
}
.among-box2 z1 {
	color: #b0b0b0;
	text-decoration: line-through;
	margin-left: 10px;
}
.among-box3 {
	
	width: 80%;
	height: 300px;
	
}
.among-box4 {
	height: 300px;
	width: 19.7%;

}
.among-box4 img {
	height: 300px;
	width: 100%;
}
.among-box5 {
	width: 23.5%;
	height: 48%;
	margin-left: 1%;
	background: #fff;
	text-align: center;
	margin-bottom: 12px;
	/* border: 1px solid #000; */
}
.among-box5 img {
	width: 40%;
	height: 60%;
	margin-top: 30px;
}
.among-box6 {
	width: 50%;
	height: 60px;
	/* border:1px solid #000; */
	margin-top: 40px;
	text-align: center;
	margin-left: 15px;
	;
}
.long {
	text-align: center;
	
}
.rewrite{
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	background:#FF6700;
	width: 100%;
	height:25%;	
	display: none;
	text-align: left;
	color:#fff;
	line-height: 20px;
	font-size: 13px;
	transition: height 2s;
    -webkit-transition: height 2s;
	
}
.rewrite-box{
	width: 90%;
	margin: auto;
	margin-left:5%;
	margin-top: 3%;
}
.rewrite h{
	font-size: 13px; 
	font-weight: bold;
	padding: 10px 10px;
	color:#fff;
}
.rewrite w{
	font-size: 13px; 
	font-weight: none;
}
.among-box1:hover .rewrite,.rewrite:hover{
		display: block;					
}
.rewrite:hover{
	height: 30%;
}


@media  only screen and (max-width:1024px) {
	.among-box{
		display: none;
	}
	.among-box2 h{
		display: none;
	}
	.long{
		display: none;
	}
	.among-box4{
		display: none;
	}
	.among-box2{
		width:100%;
	}
	#zhh-among .right{
		display: none;
	}
	.among-box1{
		width:48%;
		margin-bottom: 330px;
	}
	.c0,.among-box3{
		
	}
	.among-box1 img{
		width:80%;
	}
	.among{
		margin-bottom: 0;
	}
	.among-box5 img{
		display:none;
	}
}
@media  only screen and (max-width:1460px) {
	#zhh-among {
		width: 85%;	
	}
}
@media  only screen and (max-width:1381px) {
	#zhh-among {
		width: 90%;	
	}
}

</style>